// 有边距
<template>
    <!-- 打印 -->
 <div style="width:660px;height: 260px;position: relative;">
   <div id='printBill'>
     <div style="font-size: 12px;color: #000000;width:660px;height: 260px;position: relative;">
         <div style="position: absolute;left:28px;top: 50px;">{{2023 }}</div>
         <div style="position: absolute;left:108px;top: 50px;">{{ 10 }}</div>
         <div style="position: absolute;left:158px;top: 50px;">{{ 23 }}</div>
         <div style="position: absolute;left:130px;top: 72px;">{{ '名字' }}</div>
         <div style="position: absolute;left:130px;top: 92px;">{{ '地址' }}</div>
         <div style="position: absolute;left:360px;top: 85px;">{{ '卡号' }}</div>
         <div style="position: absolute;left:68px;top: 140px;height:84px">
           <div>简阶梯一</div>
           <div>简阶梯二</div>
           <div>简阶梯一</div>
           <div>简阶梯一</div>
         </div>
         <div style="position: absolute;left:248px;top: 140px;height:84px">
           <div>100</div>
           <div>200</div>
           <div>300</div>
           <div>400</div>
        </div>
         <div style="position: absolute;left:340px;top: 140px;height:84px">
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
        </div>
         <div style="position: absolute;left:420px;top: 140px;height:84px">
           <div>10</div>
           <div>20</div>
           <div>30</div>
           <div>40</div>
       </div>
         <div style="position: absolute;left:110px;top: 225px">{{ '壹佰员' }}</div>
         <div style="position: absolute;left:80px;top: 310px">{{ '复核' }}</div>
         <div style="position: absolute;left:230px;top: 310px">{{ '收款' }}</div>
         <div style="position: absolute;left:380px;top: 310px">{{ '开票人' }}</div>
     </div>


   </div>
 </div>
</template>

<script>
import printJS from 'print-js'
   export default {
       props:['info'],
       data (){
           return{
               indexs:[]
           }
       },
       mounted(){
           this.billPrintClick()
       },
       methods:{
           //打印
           billPrintClick(){
               let that =this
           setTimeout(function(){
               const focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
               const style = '@page {margin:0 10mm};'//打印时去掉眉页眉尾
               printJS({
               printable: 'printBill',// 标签元素id
               type: 'html',
               header: '',
               targetStyles: ['*'],
               scanStyles:false,//打印必须加上，不然页面上的css样式无效
               style,
               onPrintDialogClose:()=>{
                   console.log('挤奶了')
                   that.$emit('closeMethod')
                   clearInterval(focuser);
               }
               });
           },100)
           },
       },
   }
</script>
<style scoped >
@page {
 size: auto;
 margin: 8mm;
}
</style>